<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<Wheels.Client>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>DC Metro and Bus</title>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<style type="text/css" media="screen">
	    @import "/../../Content/Mobile/iPhone/iui40/iui.css";
	    @import "/../../Content/Mobile/iPhone/iui40/t/transit/default-theme.css";
	    @import "/../../Content/Mobile/iPhone/iui40/ext-sandbox/masabi/t/default/iui_ext.css";
        @import "/../../Content/Mobile/iPhone/css/ebt_transit.css";
	</style>

    <script type="application/x-javascript" src="/../../Content/Mobile/iPhone/iui40/iui.js"></script>
    <script type="application/x-javascript" src="/../../Content/Mobile/iPhone/iui40/ext-sandbox/masabi/iui_ext.js"></script>
    <script type="application/x-javascript" src="/../../Content/Mobile/iPhone/iui40/ext-sandbox/view/iui-views.js"></script>
	<script type="application/x-javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>
	<script type="application/x-javascript" src="/../../Content/Mobile/iPhone/css/ebt-transit-view-1.1.js"></script>
	<script type="text/javascript" content="text/html; charset=iso-8859-1">
	    window.onload = function() {
	        initWindow();
	    }

	</script>
	<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>	
</head>

<body>

	<div style="display:none" class="toolbar" id="topMenu" align="center">
	
		<h1 id="pageTitle"></h1>
		<a id="menuButton" class="button" href="/Transit/ActionMenu">Menu</a>
		<a id="backButton" class="button" href="#"></a>		
	</div>
	
	<div selected="true" id="mainMenu" title="Start" class="panel" hideBackButton="true">
	
    <div class="top" style="background-image: url('/images/home-border.png')">
        <div class="header">
            <img class="headerPicture" alt='Logo Wheels' src='/images/home-bg.png' title='Logo Wheels' />
        </div>
    </div>	
		    
	<ul>
	    <li style="padding: 10px 10px 0px 10px">
	        <a selected="true" href="javascript:SetExecType('Where');SelectPage('myMap');"><span class="b_route">Where Am I ?</span></a>
	    </li>
	</ul>
	<ul>
	    <li style="padding: 0px 10px 0px 10px">
	        <a selected="true" href="javascript:SetExecType('Fastest');SelectPage('MyTrip');"><span class="b_route">Fastest Way ?</span></a>
	    </li>
	</ul>
	<ul>
	    <li style="padding: 0px 10px 0px 10px">
	        <a selected="true" href="javascript:SetExecType('Next');SelectPage('myMap');"><span class="b_route">Next Transport ?</span></a>
	    </li>
	</ul>	
	
	
	</div>		
	
    <div id="infoPane" onclick="javascript:closePane('infoPane');" >
    
    
<div id="eidpopupWrapper" class="popupWrapper">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td class="popupGBorder" colspan="3" />
        </tr>
        <tr>
            <td class="popupVBorder" nowrap />
            <td id="eidPopupContent" class="popupContent" nowrap>    
            </td>
            <td class="popupVBorder" nowrap />
        </tr>
        <tr>
            <td class="popupGBorder" colspan="3" />
        </tr>
        <tr>
            <td colspan="3">
                <div class="popupArrow" />
            </td>
        </tr>
    </table>
</div>             
                
    </div>
    <div id="errorPane" onclick="javascript:closePane('errorPane');" >
    </div>        
    <div id='myMap' title="Map View" style="position: relative;" ontouchmove="touchHandler(event);" ontouchstart="touchHandler(event);" ontouchend="touchHandler(event);" >
    </div>   
    <div id='MyTrip' title='Dashboard' class="panel">
    </div>
    <div id='BusStops' class="panel" >
    </div>
    <div id="TrainStops" title="Metro Stations" class="panel">
    </div>
    <div id="RouteInfo" title="Route Info" class="panel">
    </div>
    <div id="LineInfo" title="Line Info" class="panel">
    </div>
    <div id="TrainPredictions" title="Station Prediction" class="panel" >
    </div>    
    
</body>
</html>

